<html>
    <head>
        <meta charset="utf-8">
        <title>WFS:Intersects Filter查询蒙古的城市</title>
        <!-- leaflet的css样式 -->
        <link rel="stylesheet" href="../lib/leaflet.css" />
        <!-- leaflet的js库 -->
        <script type="text/javascript" src="../lib/leaflet-src.js"></script>
        <!-- 添加L.WFS的引用 -->
        <script type="text/javascript" src="../lib/plugins/Leaflet-WFST.src.js"></script>

        <!-- 添加australia的geojson对象的引用 -->
        <!-- <script type="text/javascript" src="australia.js"></script> -->
        <script type="text/javascript" src="mongolia.js"></script>
        <!-- 地图容器样式 -->
        <style>
            #mapDiv{
                width: 100%;
                height: 100%;
            }
        </style>

        <script type="text/javascript">
            var map = null; 
            var wfsLayer = null;

            function init(){

                map = L.map("mapDiv", { 
                    //crs: L.CRS.EPSG4326,     //将默认crs改为WGS84
                    center: [0,0],
                    zoom: 2,
                });

                L.tileLayer( 
                    'http://{s}.tile.osm.org/{z}/{x}/{y}.png'
                ).addTo(map);

                
                //2.创建L.WFS图层,并添加到地图上
                //  L.WFS图层包含两个参数，
                //      1) options: WFS的参数
                //      2) readFowfsLayerrmat: feature的编码格式，本例中使用GeoJSON格式
                wfsLayer = new L.WFST({
                      crs           : L.CRS.EPSG4326,       //数据的坐标系     
                      showExisting  : true,                 //显示存在的
                      geometryField : 'geom',               //几何字段名称
                      url           : '/geoserver/wfs',     //wfs服务地址
                      typeNS        : 'radi',               //wfs服务命名空间
                      typeName      : 'cities',            //wfs图层名称
                }).addTo(map).once("onload",function(){
                    alert(this.getLayers().length);
                });

            }

            function onQuery(){

                //1. 将json转换为Leaflet的geometry格式
                var mongolia = L.GeoJSON.geometryToLayer(json.features[0]);
                //2. 定义L.Filter.Intersects过滤器
                var filter = new L.Filter.Intersects(
                                            'geom',             //图层的几何字段
                                            mongolia,           //设置过滤的多边形geoemtry
                                            L.CRS.EPSG4326);    //定义空间参考，与map的一致

                //3. 定义wfsLayer的load事件，在features数据从服务端加载后，触发onload事件
                //   使用once来绑定事件，说明事件只执行一次
                wfsLayer.once('load',function(){
                    alert(this.getLayers().length);
                })

                //4. 清空当前wfsLayer上的features，以便显示新查询的结果
                wfsLayer.clearLayers();

                //5. 调用wfsLayer的loadFeatures方法，传入filter参数
                //   查询结束后，会自动触发上面定义的load事件
                wfsLayer.loadFeatures(filter);

            }
                
        </script>
            
    </head>
    <body onload="init()">
        <!--地图的容器-->
        <input type="button" value="Intersects查询" onclick="onQuery();">
        <div id="mapDiv"></div>
    </body>
</html>



